<!--
 * @Description: 打印条码
 *
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-29 11:14:39
 * @FilePath: /yuxiuproweb/src/views/split/bz/mods/barCode.vue
-->
<template>
  <el-drawer
    size="60%"
    :visible.sync="shows"
    direction="ltr"
    :with-header="false"
    class="drawer-view"
  >
    <div id="printContent">
      <div
        v-for="(data, index) in list"
        :key="index"
        style="
          width: 200px;
          height: 652px;
          overflow: hidden;
          border-top: 1px solid #000;
          border-bottom: 1px solid #000;
        "
      >
        <div class="print-image" style="margin-top: 60px">
          <img :src="data.logo" alt="" />
        </div>
        <div class="print-text">销售：{{ data.orderId }}</div>
        <div class="print-text">房间：{{ data.room.name }}</div>
        <div class="print-text">客户：{{ data.clientName }}</div>
        <div class="print-text">型号：{{ data.name }}</div>
        <div class="print-text">
          尺寸：{{ data.wright }} * {{ data.height }}
        </div>
        <div class="print-bar-code">
          <img :id="`barCode${index}`" />
        </div>
        <div style="width: 100%; text-align: center">
          {{ data.orderCustomOtherId }}
        </div>
        <div class="print-footer">
          <div class="footer-text">洗涤</div>
          <div class="footer-mods">
            <div class="mods-img">
              <img src="@/assets/images/print1.png" alt="" />
            </div>
            <div class="mods-img">
              <img src="@/assets/images/print2.png" alt="" />
            </div>
            <div class="mods-img">
              <img src="@/assets/images/print3.png" alt="" />
            </div>
            <div class="mods-img">
              <img src="@/assets/images/print4.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import printJS from "print-js";
import JsBarcode from "jsbarcode";

export default {
  props: {
    show: Boolean,
    list: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.list.forEach((e, index) => {
        this.getJsBarcode(e.orderCustomOtherId, `#barCode${index}`);
      });
      setTimeout(() => {
        this.printHtml();
      }, 500);
    });
  },
  methods: {
    getJsBarcode(code, byId) {
      let barheight = "60";
      JsBarcode(byId, code, {
        format: "CODE128", //条形码的格式
        width: 1.5, //线宽
        height: barheight, //条码高度
        lineColor: "#000", //线条颜色
        displayValue: false, //是否显示文字
        margin: 2, //设置条形码周围的空白区域
      });
    },
    printHtml() {
      const style =
        "@page { margin: 10px 0 10px 10px } @media print { .print-text { padding-left: 10px; } .print-image { width: 190px; height: 130px; overflow: hidden;margin-bottom: 30px;}.print-image img {width: 100%;height: 100%;}.print-bar-code {margin-top: 30px;width: 190px;display: flex;align-items: center;justify-content: center;}.footer-text {width: 190px;text-align: center;margin-top: 30px;}.footer-mods {width: 190px;display: flex;align-items: center;justify-content: space-around;}.mods-img {width: 45px;height: 45px;}.mods-img img {width: 100%;height: 100%;}    }";
      printJS({
        printable: "printContent",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          this.shows = false;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-view {
  ::v-deep {
    .el-descriptions-row th {
      display: none;
    }
    .el-descriptions-row td {
      border: 1.5px solid #000;
      color: #000;
    }
  }
}

.print-image {
  width: 200px;
  height: 130px;
  overflow: hidden;
  margin-bottom: 30px;
}
.print-image img {
  width: 100%;
  height: 100%;
}
.print-bar-code {
  margin-top: 30px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-text {
  width: 200px;
  text-align: center;
  margin-top: 30px;
}
.footer-mods {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.mods-img {
  width: 50px;
  height: 50px;
}
.mods-img img {
  width: 100%;
  height: 100%;
}
</style>
